<script setup lang="ts">
// ==================== 导入依赖 ====================
import { useCountDown } from '@vant/use'

// ==================== 组件属性定义 ====================
// 接收父组件传递的显示状态
defineProps(['show'])
// 定义向父组件发送的事件
const emit = defineEmits(['changeShowEventPrev'])

// ==================== 状态管理 ====================
// 用户状态管理
const userStore = useUserStore()
// 活动数据
const activityData = ref<any>({})

// ==================== 倒计时功能 ====================
// 初始化倒计时器
const countDown = ref<any>(useCountDown({
  time: 0,
  onFinish: () => {
    // 倒计时结束时重新获取活动配置
    initConfig()
  },
}))

// ==================== 核心业务方法 ====================
/**
 * 初始化活动配置
 * 获取活动详情信息并启动倒计时
 */
function initConfig() {
  apo.activity.getActivityDetailInfo(50, (error: any, data: any) => {
    if (error) {
      apo.logger.error('getActivityDetailInfo error:', error)
      return
    }
    activityData.value = data
    initCountDown()
  })
}

/**
 * 初始化倒计时
 * 根据活动数据设置倒计时时间
 */
function initCountDown() {
  if (activityData.value.count_down) {
    countDown.value.reset(activityData.value.count_down * 1000)
    countDown.value.start()
  } else {
    countDown.value.reset(0)
  }
}

// ==================== 用户交互方法 ====================
/**
 * 关闭弹窗前的处理
 * 重置倒计时并通知父组件关闭弹窗
 */
function beforeClose() {
  countDown.value.reset(0)
  emit('changeShowEventPrev', false)
}

/**
 * 处理按钮点击事件
 * 关闭弹窗并打开钱包页面
 */
function handleClick() {
  beforeClose()
  userStore.changeShowCarteira(true)
}
</script>

<template>
  <!-- 活动预告弹窗 -->
  <van-dialog
    :show="show"
    title=""
    destroy-on-close
    class-name="custom-dialog activity-dialog"
    overlay-class="activity-dialog-overlay"
    teleport="body"
    :show-confirm-button="false"
    :show-cancel-button="false"
    @open="initConfig"
    @cancel="beforeClose"
  >
    <div class="rechargeBubblePop">
      <!-- 关闭按钮 -->
      <div class="close" @click="beforeClose">
        <img src="/images/layout/cp_Close 2.png">
      </div>
      <img class="top-img" src="/images/activity/event-prev/Activity_Bg 1.png">
      <div class="time">
        <div class="text">
          <!-- 小时 -->
          <div class="value">
            {{ pad2(countDown.current.hours) }}
          </div>
          <div class="timeTitle">
            <img src="/images/activity/event-prev/Time_H.png">
          </div>
          <!-- 分钟 -->
          <div class="value">
            {{ pad2(countDown.current.minutes) }}
          </div>
          <div class="timeTitle">
            <img src="/images/activity/event-prev/Time_Min.png">
          </div>
          <!-- 秒 -->
          <div class="value">
            {{ pad2(countDown.current.seconds) }}
          </div>
          <div class="timeTitle">
            <img src="/images/activity/event-prev/Time_S.png">
          </div>
        </div>
      </div>

      <!-- 滚动内容区域 -->
      <div class="overflow-content">
        <!-- 奖励内容区域 -->
        <div class="contentReward">
          <!-- 奖励标题 -->
          <div class="contentRewardTitle">
            <p>{{ $t('activity.event_prev.bonusTitle') }}</p>
            <div class="line" />
            <p>{{ $t('activity.event_prev.bonusSubtitle') }}</p>
          </div>

          <!-- 奖励列表 -->
          <div class="itemBox">
            <div
              v-for="item in (activityData.activity_bonus || [])"
              :key="item.name"
              class="item"
            >
              <p>{{ item.name }}</p>
              <p>
                <span>
                  {{ apo.user.currency_symbol }}
                </span>
                {{ apo.utils.formatAmount(item.min) }} - {{ apo.utils.formatAmount(item.max) }}
              </p>
            </div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div v-click-move class="btn" @click="handleClick">
          <span>{{ $t('activity.event_prev.loginTomorrow') }}</span>
        </div>

        <!-- 规则说明组件 -->
        <RuleBox :content="activityData.desc" />
      </div>
    </div>
  </van-dialog>
</template>

<style scoped lang="scss">
// ==================== 主容器样式 ====================
.rechargeBubblePop {
  border-radius: 0.2rem;
  height: auto;
  background: #392942;
  box-shadow: 0 -2px 8px #2b160040;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  width: 9rem;
  margin: 0 auto;

  // 顶部背景图
  .top-img {
    width: 100%;
  }
}

// ==================== 关闭按钮样式 ====================
.close {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  width: 1rem;

  img {
    width: 100%;
  }
}

// ==================== 倒计时样式 ====================
.time {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 1.92rem;

  .text {
    opacity: 1;
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    color: var(--theme-neutral1);

    // 倒计时数值样式
    .value {
      color: #7efffd;
      font-size: 0.5rem;
      font-weight: 900;
    }

    // 时间单位图标样式
    .timeTitle img {
      height: 0.4rem;
      vertical-align: middle;
      margin-top: -0.02rem;
    }
  }
}

// ==================== 滚动内容区域样式 ====================
.overflow-content {
  max-height: 55vh;
  overflow-y: auto;
  margin-top: -1rem;
  padding-top: 0.3rem;
  border-radius: 0.3rem 0.3rem 0 0;
  width: 8.4rem;
  padding-bottom: 0.3rem;
}

// ==================== 奖励内容区域样式 ====================
.contentReward {
  position: relative;
  width: 100%;
  margin-top: 0.3rem;
  border-radius: 0.3rem;
  overflow: hidden;

  // 奖励标题样式
  .contentRewardTitle {
    display: flex;
    color: #fff;
    width: 100%;
    background: #6a53d0;

    p {
      width: 50%;
      text-align: center;
      font-size: 0.36rem;
      line-height: 1rem;
    }
  }

  // 奖励项目样式
  .item {
    display: flex;
    color: #ff7ae1;
    width: 100%;
    background: #3f2e4b;

    // 偶数行背景色
    &:nth-child(even) {
      background: #2c1d31;
    }

    p {
      width: 50%;
      text-align: center;
      font-size: 0.36rem;
      line-height: 1rem;
      display: flex;
      justify-content: center;
      white-space: nowrap;
      align-items: center;

      // 金额显示样式
      &:last-child {
        color: #ffd700;
        font-size: 0.32rem;
        font-weight: 700;
      }

      // 货币符号样式
      span {
        display: inline-block;
        width: 0.6rem;
        height: 0.6rem;
        margin-right: 0.2rem;
        background: url('/images/activity/event-prev/unit.png') no-repeat center center;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.24rem;
      }
    }
  }
}

// ==================== 操作按钮样式 ====================
.btn {
  position: relative;
  font-size: 0.38rem;
  width: 6.91rem;
  height: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fdd528;
  border-radius: 1rem;
  color: #3a1d33;
  width: 100%;
  margin-top: 0.36rem;

  span {
    position: relative;
  }
}
</style>
